<template>
	<div id="orderManagement" class="orderManagement same-change-oldstyle">
		<div class="same-head-box">
			<div class="saem-seat-box">
				<div class="saem-seat-left">
					<span>当前位置：</span>
					<el-breadcrumb separator-class="el-icon-arrow-right">
						<el-breadcrumb-item :to="{ path: '/orderManagement' }">订单管理</el-breadcrumb-item>
						<el-breadcrumb-item>订单</el-breadcrumb-item>
					</el-breadcrumb>
				</div>
				<div class="saem-seat-right">
					<button class="same-search-btns same-search-export" @click="RefreshFun">刷新</button>
					<!-- <button class="same-search-btns" @click="returnBack">返回</button> -->
				</div>
			</div>
			<div class="">
				<div class="same-search-box">
					<div>
						<div class="same-search-left">
							<div class="same-left-one">
								<span class="same-search-span">订单编号</span>
								<el-input size="medium" v-model="sale_number" type="text" placeholder="请输入订单编号" style="width: 160px;">
								</el-input>
							</div>
              <div class="same-left-one">
                <span class="same-search-span">手机号码</span>
                <el-input size="medium" v-model="phone" type="text" placeholder="请输入客户手机号码" style="width: 160px;">
                </el-input>
              </div>
							<div class="same-left-one">
								<span class="same-search-span">水卡卡号</span>
								<el-input size="medium" v-model="cardNum" type="Number" placeholder="请输入水卡卡号" style="width: 160px;">
								</el-input>
							</div>
							<div class="same-left-one">
								<span class="same-search-span">园区名称</span>
								<el-input size="medium" v-model="village_name" type="text" placeholder="请输入园区名称" style="width: 160px;">
								</el-input>
							</div>
							<div class="same-left-one">
								<span class="same-search-span">关键字</span>
								<el-input size="medium" v-model="equipment_name" type="text" placeholder="请输入主板名称/设备名称/主板编号"
									style="width: 160px;">
								</el-input>
							</div>
							<div class="same-left-one">
								<span class="same-search-span same-search-fisrt">下单时间</span>
								<el-date-picker style="width:140px" v-model="start_time" type="date" size="medium"
									value-format="yyyy-MM-dd" placeholder="开始时间"></el-date-picker>
								<div class="same-interval">至</div>
								<el-date-picker style="width:140px" v-model="end_time" type="date" size="medium"
									value-format="yyyy-MM-dd" placeholder="结束时间"></el-date-picker>
							</div>

							<div class="same-left-one" v-if="!moveShow">
								<div class="same-left-zdshwo" :hidden="!moveBtn" @click="openMore">更多查询条件<i
										:class="[moveShow?'el-icon-arrow-up':'el-icon-arrow-down']"></i></div>
								<el-button type="primary" size="medium" @click="search()">搜索</el-button>
								<el-button type="info" size="medium" @click="reset()">重置</el-button>
							</div>
						</div>
						<div class="same-search-right"></div>
					</div>
					<!-- 搜索更多 -->
					<div>
						<div class="same-search-left  new-sear-height" ref="leftHeight">
							<div class="same-left-one">
								<span class="same-search-span">支付状态</span>
								<el-select size="medium" v-model="pay_status" placeholder="请选择" style="width: 140px;">
									<el-option v-for="item in payOption" :key="item.value" :label="item.label" :value="item.value">
									</el-option>
								</el-select>
							</div>
							<div class="same-left-one">
								<span class="same-search-span">支付类型</span>
								<el-select size="medium" v-model="chooseType" placeholder="请选择" style="width: 140px;">
									<el-option v-for="item in stateoption" :key="item.value" :label="item.label" :value="item.value">
									</el-option>
								</el-select>
							</div>
							<!-- <div class="same-left-one">
								<span class="same-search-span">退款状态</span>
								<el-select size="medium" v-model="refund_status" placeholder="请选择" style="width: 140px;">
									<el-option v-for="item in refundoption" :key="item.value" :label="item.label" :value="item.value">
									</el-option>
								</el-select>
							</div> -->
							<!--<div class="same-left-one">
								<span class="same-search-span">园区地址:</span>
								<el-select size="medium" v-model="addressType" placeholder="请选择" style="width: 140px;">
									<el-option v-for="item in addressList" :key="item.address" :label="item.address" :value="item.address"></el-option>
								</el-select>
							</div>-->

							<div class="same-left-one" :class="[moveShow?'':'new-sear-opacity']">
								<div class="same-left-zdshwo" :hidden="!moveBtn" @click="openMore">收起更多查询条件<i
										:class="[moveShow?'el-icon-arrow-up':'el-icon-arrow-down']"></i></div>
								<el-button type="primary" size="medium" @click="search()">搜索</el-button>
								<el-button type="info" size="medium" @click="reset()">重置</el-button>
							</div>
						</div>
						<div class="same-search-right"></div>
					</div>
				</div>
			</div>
			<el-row :gutter="24">
				<el-col :span="4" v-for="(item,index) in allMoney" :key="item.pay_type">
					<div class="card" :class="{
							alipay: item.pay_type == 6,
							coin: item.pay_type == 5,
							intelgral: item.pay_type == 4,
							virtual: item.pay_type == 3,
							cards: item.pay_type == 2,
							wechat: item.pay_type == 1
						}">
						<p>{{ item.money|filterNumber }}<label v-if='item.pay_type==refundMoney[index].pay_type'
								class="card-refund">(含退款:{{refundMoney[index].money |filterNumber}})</label>
						</p>
						<span v-if="item.pay_type == 6">支付宝</span>
						<span v-if="item.pay_type == 5">投币</span>
						<span v-if="item.pay_type == 4">积分支付</span>
						<span v-if="item.pay_type == 3">电子卡</span>
						<span v-if="item.pay_type == 2">实体卡</span>
						<span v-if="item.pay_type == 1">微信</span>
						默认显示当月数据
					</div>
				</el-col>
			</el-row>
		</div>

		<div class="same-table-box">
			<h4 class="same-title-box">我的订单<div class="same-title-div"> <span style="color:#FF6565">默认显示当月数据</span>
					<div class="same-title-div2" v-if="total && sunNumber">[订单数：<span>{{total}}</span>
						订单金额：<span>{{sunNumber|filterNumber}}</span> (含退款金额<span>{{refundNumber | filterNumber}})</span> ] <span
							style="color:#FF6565">(注意: 消费数据仅统计本年数据)</span></div>
				</div>
			</h4>
			<div class="table_box">

				<div class="common-table-outer">
					<el-table class="common-table" v-loading="loading" header-cell-class-name="common-table-header-cell"
						:data="order" stripe>
						<el-table-column header-align="center" width="50" align="center" label="序号">
							<template slot-scope="scope">
								{{scope.$index+1+(page-1)*pageSize}}
							</template>
						</el-table-column>
						<el-table-column align="center" prop="sale_number" label="订单编号">
						</el-table-column>
<!--            <el-table-column align="center" prop="wx_nickname" label="用户昵称">
                <template slot-scope="scope">
                  &lt;!&ndash; filtersCard 过滤器 &ndash;&gt;
                  {{ scope.row.wx_nickname || '——' }}
                </template>
            </el-table-column>-->

						<el-table-column align="center" prop="id" label="水卡卡号">
							<template slot-scope="scope">
								<!-- filtersCard 过滤器 -->
								{{ scope.row.card_number}}
							</template>
						</el-table-column>


						<el-table-column align="center" prop="id" label="手机号码">
							<template slot-scope="scope">
								{{ scope.row.phone || '——' }}
							</template>
						</el-table-column>

						<el-table-column align="center" show-overflow-tooltip prop="id" label="园区名称">
							<template slot-scope="scope">
								{{ scope.row.village_name || '——' }}
							</template>
						</el-table-column>
						<el-table-column align="center" prop="id" label="设备名称">
							<template slot-scope="scope">
								{{ scope.row.equipment_control_name || '——' }}
							</template>
						</el-table-column>
						<el-table-column align="center" prop="id" label="主板编号">
							<template slot-scope="scope">
								{{ scope.row.equipment_number || '——' }}
							</template>
						</el-table-column>
						<el-table-column align="center" prop="id" label="主板名称">
							<template slot-scope="scope">
								{{ scope.row.equipment_name || '——' }}
							</template>
						</el-table-column>

						<el-table-column align="center" prop="id" label="打水量">
							<template slot-scope="scope">
								{{ scope.row.water_amount+'L' || '——' }}
							</template>
						</el-table-column>

						<el-table-column align="center" prop="id" label="支付金额">
							<template slot-scope="scope">
								{{ scope.row.rel_money|filterNumber}} {{scope.row.pay_type != 4?'元':'分'}}
							</template>
						</el-table-column>
						<el-table-column align="center" prop="id" label="退款金额">
							<template slot-scope="scope">
								{{ scope.row.refund_money|filterNumber}} {{scope.row.pay_type != 4?'元':'分'}}
							</template>
						</el-table-column>

						<el-table-column align="center" prop="id" label="订单类型">
							<template slot-scope="scope">
								<el-tag size="mini" type="success" v-if="scope.row.order_type == 1">线上</el-tag>
								<el-tag size="mini" type="primary" v-else>线下</el-tag>
							</template>
						</el-table-column>

						<el-table-column align="center" prop="pay_type_desc" label="支付类型">
						</el-table-column>

						<el-table-column align="center" prop="id" label="订单状态">
							<template slot-scope="scope">
								<span class="redColor greed_show" v-if="scope.row.pay_status == 1">已支付</span>
								<span class="redColor greed_show" v-if="scope.row.pay_status == 2">未支付</span>
								<span class="redColor" v-if="scope.row.pay_status == 3">已退款</span>
							</template>
						</el-table-column>
						<el-table-column align="center" prop="id" label="退款状态">
							<template slot-scope="scope">
								<span class="redColor greed_show" v-if="scope.row.refund_status == 1">未退款</span>
								<span class="redColor greed_show" v-if="scope.row.refund_status == 2">部分退款</span>
								<span class="redColor" v-if="scope.row.refund_status == 3">全额退款</span>
							</template>
						</el-table-column>


						<el-table-column align="center" prop="id" label="下单时间">
							<template slot-scope="scope">
								{{ scope.row.create_time || '——' }}
							</template>
						</el-table-column>


						<el-table-column align="center" prop="id" label="退款时间">
							<template slot-scope="scope">
								{{ scope.row.refund_time || '——' }}
							</template>
						</el-table-column>
						<template slot="empty" v-if="isLoad">
							<div class="new-no-data-show">
								<img src="../../assets/images/no-data.png" alt="">
								<div>暂无相关数据</div>
							</div>
						</template>
					</el-table>

					<div class="same-page-inShow" v-if="order.length > 0 && isLoad">
						<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
							:current-page="page" :page-sizes="sizes" :page-size="pageSize"
							layout="total, prev, pager, next, jumper,sizes" :total="total"></el-pagination>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		name: 'orderManagement',
		data: function () {
			return {
				loading: true, //加载动画
				isLoad: false,
				value2: '', //结束时间
				page: 1,
				pageSize: 15,
				sizes: [15, 30, 40],
				total: 0,
				order: [],
				allMoney: [],
				refundMoney: [],//包含的退款金额
				refundNumber: 0,
				addressList: [],
				pay_type: 0,
				start_time: '',
				end_time: '',
				nowMonthStr: '',//默认本月第一天
				nowStr: '',//默认今天
				cardNum: '',
				chooseType: '0', //选择类别
				addressType: '', //选择类别
				stateoption: [
					{
						value: '0',
						label: '全部'
					},
					{
						value: '1',
						label: '微信支付'
					},
					{
						value: '2',
						label: '实体卡支付'
					},
					{
						value: '3',
						label: '电子卡支付'
					},
					{
						value: '4',
						label: '积分支付'
					},
					{
						value: '5',
						label: '投币支付'
					},
					{
						value: '6',
						label: '支付宝支付'
					}
				],
				payOption: [
					{
						value: '0',
						label: '全部'
					},
					{
						value: '1',
						label: '已支付'
					},
					{
						value: '2',
						label: '未支付'
					}

				],
				pay_status: '1',//支付状态
				sale_number: '',//编号
				village_name: '',//园区名称
				equipment_name: '',//主板名称
				moveBtn: false,//是否暂时更多查询条件按钮按钮 搜索条件控制
				moveShow: false,//是否开启动画
				scrollHeight: '',//需要监听的高度
				sunNumber: '0.00',
        phone:''
			};
		},
		computed: {},
		// 初始化执行
		created: function () {
			this.$emit('gitHidden', true);//是否隐藏底部版权 true 隐藏
			var that = this;

			//1 获取当前时间
			var date = new Date();//获取当前时间
			var nowyear = date.getFullYear() + "";//获取年（yyyy）
			var nowmonth = date.getMonth() + 1 + "";//获取月份（0-11，0代表1月）
			var nowday = date.getDate() + "";//获取日
			//调用格式化方法
			nowmonth = that.dateformat(nowmonth);
			nowday = that.dateformat(nowday);
			//重新拼接格式
			var nowStr = nowyear + "-" + nowmonth + "-" + nowday;
			var nowMonthStr = nowyear + "-" + nowmonth + "-01";
			that.nowMonthStr = nowMonthStr;
			that.nowStr = nowStr;
			that.start_time = nowMonthStr;
			that.end_time = nowStr;
			that.balanceList(); // 获取余额提现页面数据
		},
		inject: ['reload'],
		methods: {
			//方法：月日为一位数前面补0（例8变为08）
			dateformat(fmt) {
				if (fmt.length == 1) {
					fmt = "0" + fmt;
				}
				return fmt;
			},
			RefreshFun() {
				// 调用reload方法，刷新整个页面
				this.reload()
			},
			//返回
			returnBack() {
				this.$router.back(-1);
			},
			jumpbalance() {
				this.$router.push({
					path: '/withdrawMoney'
				});
			},
			//消费类型
			choosedropdown(Type) {
				this.pay_type = Type;
			},
			//地址选择
			chooseAddress(address) {
				this.addressType = address;
			},

			//每页
			handleSizeChange(val) {
				var that = this;
				that.page = 1;
				that.pageSize = parseInt(`${val}`);
				that.balanceList();
			},
			//分页
			handleCurrentChange(val) {
				var that = this;
				that.page = val;
				that.balanceList();
			},

			//重置
			reset() {
				this.page = 1;
				this.pay_type = '';
				this.start_time = this.nowMonthStr;
				this.end_time = this.nowStr;
				this.cardNum = '';
				this.addressType = '';
				this.value2 = '';
				this.chooseType = '0';
				this.pay_status = '0';
				this.sale_number = '';
				this.village_name = '';
				this.equipment_name = '';
				this.phone ='';
				this.balanceList();
			},

			search() {
				this.order = [];
				this.total = 1;
				this.balanceList();
			},
			// 获取余额提现页面数据
			balanceList: function () {
				var that = this;
				this.loading = true; //打开loading动画
				this.isLoad = false;
				// ajax请求
				that.$post({
					url: 'Partner/OrderList/sell_water',
					data: {
						page: that.page,
						pageSize: that.pageSize,
						pay_type: that.chooseType,
						pay_status: that.pay_status,
						sale_number: that.sale_number,
						start_time: that.start_time ? that.start_time : '',
						end_time: that.end_time ? that.end_time : '',
						card_number: that.cardNum,
						village_name: that.village_name,
						equipment_name: that.equipment_name,
						address: that.addressType,
              phone:that.phone,
					},
					success: data => {
						this.loading = false; //关闭loading动画
						this.isLoad = true;
						if (data.code == 1000) {
							that.order = data.data.order;
							that.allMoney = data.data.allMoney;
							that.addressList = data.data.address;
							that.total = Number(data.data.count);
							that.sunNumber = data.data.sum;
							this.refundMoney = data.data.refundMoney;
							console.log(this.refundMoney)
							this.refundNumber = data.data.refund_sum;
						} else if (data.code == -1003) {
							//这是原来的判断
							if (that.page == 1) {
								that.order = [];
							}
							that.order = [];
							that.allMoney = '';
							that.addressList = '';
							that.total = '';
							that.sunNumber = '';
							this.refundMoney = '';
							this.refundNumber = '';
							//this.$message.error(data.message);
						} else {
							this.$message.error(data.message);
						}
					}
				});
			},
			//此处获取高度必须在dom元素创建完成之后才能获取
			gitHeight() {
				//  let clientHeight=this.$refs.leftHeight.clientHeight;
				let scrollHeight = this.$refs.leftHeight.scrollHeight;
				this.scrollHeight = scrollHeight;
				scrollHeight <= 30 ? this.moveBtn = false : this.moveBtn = true;

			},
			openMore() {
				this.moveShow = !this.moveShow;
				this.$refs.leftHeight.style.height = this.moveShow ? this.scrollHeight + 'px' : 0 + 'px';
			},
		},
		mounted() {
			this.gitHeight();
			//监听高度变化
			var that = this;
			window.addEventListener("resize", function () {
				let scrollHeight = that.$refs.leftHeight && that.$refs.leftHeight.scrollHeight ? that.$refs.leftHeight.scrollHeight : that.scrollHeight;
				that.scrollHeight = scrollHeight;
			});
		},
		watch: {
			// 如果 `scrollHeight` 发生改变，这个函数就会运行 此处是为了防止用户缩小屏幕导致页面显示不全
			scrollHeight: function (val) {
				this.$refs.leftHeight.style.height = this.moveShow ? this.scrollHeight + 'px' : 0 + 'px';
			}
		},
		//进入之前
		beforeRouteEnter(to, from, next) {
			next();
		},
		//离开之前
		beforeRouteLeave(to, from, next) {
			from.meta.keepAlive = false;
			next();
		}
	};
</script>
<style scoped>
	#orderManagement {
		width: 100%;
		height: 100%;
		background: #ffffff;
	}

	/* 头部搜索 */

	#orderManagement .order_box {
		display: flex;
		flex-direction: column;
		margin: 0px 40px;
	}

	#orderManagement .balspan {
		color: #FF6565;
		font-weight: bold;
		font-size: 22px;
	}

	/*统计*/

	#orderManagement .data_tx_jf {
		display: flex;
		flex-direction: column;
	}

	#orderManagement .datatxList {
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 100px;
	}

	#orderManagement .boxtx_one {
		width: 32%;
		height: 100px;
		display: flex;
		height: 100px;
		border: 1px solid #dcdbd9;
		border-radius: 4px;
	}

	#orderManagement .ltx_show {
		width: 30%;
		height: 100%;
		border-radius: 4px;
	}

	#orderManagement .gl_color {
		background: #8f3e92;
		border: 1px solid #8f3e92;
	}

	#orderManagement .bl_ctx {
		background: #275485;
		border: 1px solid #275485;
	}

	#orderManagement .gr_color {
		background: #16903b;
		border: 1px solid #16903b;
	}

	#orderManagement .rtx_show {
		padding: 0px 40px;
		display: flex;
		justify-content: center;
		flex-direction: column;
	}

	#orderManagement .sptx_style {
		color: #636261;
		margin-bottom: 10px;
		font-weight: bold;
		font-size: 16px;
	}

	#orderManagement .pt_style {
		color: #999999;
	}


	#orderManagement .redColor {
		color: #FF6565;
	}

	#orderManagement .greed_show {
		color: #399544;
	}

	#orderManagement .paginShow {
		margin-top: 40px;
		display: flex;
		justify-content: flex-end;
	}

	#orderManagement .opera_Btn {
		position: absolute;
		top: 20px;
		right: 0px;
		height: 30px;
		width: 100px;
		border: 1px solid #bf73ac;
		background-color: #fff;
		color: #bf73ac;
		border-radius: 4px;
		cursor: pointer;
		font-weight: bold;
		margin-left: 10px;
	}

	#orderManagement .opera_Btna {
		position: absolute;
		top: 20px;
		right: 120px;
		height: 30px;
		width: 100px;
		border: 1px solid #bf73ac;
		background-color: #fff;
		color: #bf73ac;
		border-radius: 4px;
		cursor: pointer;
		font-weight: bold;
	}

	#orderManagement .el-range-editor.el-input__inner {
		height: 30px;
	}

	#orderManagement .el-range-editor.el-input__inner input {
		height: auto;
	}

	.money-count {
		display: flex;
		align-items: center;
	}

	.el-row {
		margin-bottom: 20px;
	}

	.card {
		border-radius: 5px;
		color: #fff;
		text-align: center;
		box-sizing: border-box;
		padding: 24px 0;
		position: relative;
		font-size: 12px;
	}

	.card p {
		font-size: 1.5rem;
	}

	.alipay {
		background: #3792FF;
	}

	.alipay::after {
		content: '';
		position: absolute;
		background: url('/static/images/ico-alipay.png') no-repeat center;
		width: 125px;
		height: 112px;
		right: 0;
		top: 0;
	}

	.wechat {
		background: #2DA339;
	}

	.wechat::after {
		content: '';
		position: absolute;
		background: url('/static/images/ico-wechat.png') no-repeat center;
		width: 143px;
		height: 107px;
		right: 0;
		top: 0;
	}

	.coin {
		background: #FF6565;
	}

	.coin::after {
		content: '';
		position: absolute;
		background: url('/static/images/ico-coin.png') no-repeat center;
		width: 136px;
		height: 120px;
		right: 0;
		top: 0;
	}

	.cards {
		background: #EB6941;
	}

	.cards::after {
		content: '';
		position: absolute;
		background: url('/static/images/ico-card.png') no-repeat center;
		width: 147px;
		height: 120px;
		right: 0;
		top: 0;
	}

	.virtual {
		background: #FFA94D;
	}

	.virtual::after {
		content: '';
		position: absolute;
		background: url('/static/images/ico-virtual.png') no-repeat center;
		width: 120px;
		height: 118px;
		right: 0;
		top: 0;
	}

	.intelgral {
		background: #3BBCC1;
	}

	.intelgral::after {
		content: '';
		position: absolute;
		background: url('/static/images/ico-intelgral.png') no-repeat center;
		width: 126px;
		height: 120px;
		right: 0;
		top: 0;
	}

	.card-refund {
		display: block;
		font-size: 12px;
		margin-bottom: 3px;
	}
</style>
